<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>inote 云记事</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../css/container.css" />
    <link rel="stylesheet" type="text/css" href="../css/component/bar.css" />
    <style type="text/css">
        html,body{
            height: 100%;
        }
        #wrap{
            height: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            width: 100%;
        }
        #header{
            position: fixed;
            z-index: 100;
        }
        #main{
            -webkit-box-flex: 1; 
            -webkit-flex: 1;  
            z-index: 0;
        }
        #footer{
            position: fixed;
            bottom: 0px;
            width: 100%;height: 56px;
            background-color: #fff;
            border-top: 1px solid rgba(0,0,0,0.12);
            z-index: 100;
        }
        .edit-menu{
            text-align: center;
        }
        .edit-menu > img{
            width: 24px;
            margin-top: 16px;
        }
        .menuActive{
            background: rgba(0,0,0,0.12);
        }
        .css-test{
            width: 50px;
            height: 50px;
            margin-top: 10px;
            background-color: #2196F3;
            border-radius: 100%;
        }
        .tabActive{
            background-color: #42A5F5;
        }
        .hidef{
            display: none;
        }
        .mainpage{
            padding-top: 56px;
            padding-bottom: 8px;
            padding-left: 15px;
            padding-right: 15px;
        }
        textarea{
            border: 0px;
            resize: none;
            overflow-x: hidden; 
        }
        .text-show{
            width: 100%;
            height: 100%;
            border: 0px;
            font-size: 20px;
        }
        textarea:focus,
        textarea:active{
            outline: none;
        }
        /**/
        .wrap2{
            background-color: #fff;
        }
        .form-control{
            width: 100%;
            border: 0px;
            font-size: 20px;
            line-height: 1.42857143;
        }
        /**/
        .hide{
            -webkit-transition: all .1s;
            transition:all .1s;
            -webkit-transform: scale(0);
            transform:scale(0);
            opacity: 0;
        }
        .show{
            -webkit-transform: scale(1);
            transform:scale(1);
            opacity: 1;
        }
        .over{
            display: none;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header" class="ino-bar home-bar">
            <div class="title">我的笔记</div>
            <table class="ino-bar-content">
                <tr>
                    <td>
                        <div class="bar-tab bar-tab-back" tapmode="tabActive" onclick="api.closeWin();">
                            <img class="listTab" src="../image/png/webpage/arrow_back.png">
                        </div>                        
                    </td>
                    <td class="bar-right" align="right">
                        <div id="check" class="bar-tab bar-tab-menu hidef" tapmode="tabActive" onclick="complete()">
                            <img class="listTab" id="rightIcon" src="../image/png/webpage/check.png">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div id="main">
            <div id="main" class="mainpage">
                <div class="text-show" id="textshow" onclick="openText()"></div>

                <div id="wrap" class="wrap2 hide">
                    <div id="main">
                        <textarea id="textarea1" class="form-control" placeholder="点击这里，记录发生的事情" autofocus></textarea>
                    </div>
                </div>
                <!-- 弹出edit -->
            </div>
        </div>
        <div id="footer" class="in-container">
            <div class="in-col-1 edit-menu" tapmode="menuActive" onclick="share()">
                <img src="../image/png/edit/share.png">
            </div>
            <div class="in-col-1 edit-menu" tapmode="menuActive" onclick="addToTime()">
                <img src="../image/png/edit/add_alarm.png">
            </div>
            <div class="in-col-1 edit-menu" tapmode="menuActive" onclick="clickDelete()">
                <img src="../image/png/edit/delete.png">
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">

    // =====================================================
    // 在被调用时，webpage只接收两个参数
    // @name, @pagename
    // =====================================================

    // 首先计算布局的宽高
    var mainW = $api.dom('#main').offsetWidth - 30;
    var mainH = $api.dom('#main').offsetHeight - 120;
    $api.css($api.dom('textarea'), 'width: '+mainW+'px;height: '+mainH+'px;');

    apiready = function(){
        var id = api.pageParam.id;
        var detail = api.pageParam.detail;

        // 事件处理
        addEventListener();

        // 将detail的值写入text-show和textarea
        $api.dom('.text-show').innerHTML = detail;
        $api.dom('textarea').innerHTML = detail;
        
        // 更新，更新前检查是否为空，空就删除，非则更新
        api.addEventListener({
            name: 'update'
        }, function(ret, err){
            if( ret ){
                if (document.getElementById('textarea1').value.length === 0) {
                    deleteText();
                }else{
                    updateText();
                };
            }
        });
        // 删除的操作
        api.addEventListener({
            name: 'delete'
        }, function(ret, err){
            if( ret ){
                deleteText();
            }
        });
        // 添加至计划任务
        api.addEventListener({
            name: 'addtotime'
        }, function(ret, err){
            if( ret ){
                api.openWin({
                    name: 'add_schedule',
                    url: 'add_schedule.html',
                    pageParam: {
                        name: 'add_edit_to_schedule',
                        pagename: '添加新任务',
                        taskId: 'e',
                        editDetail: document.getElementById('textarea1').value
                    }
                });
            }
        });
        // 更新与删除
        function updateText() {
            var db = api.require('db');
            db.openDatabase({
                name: 'inote',
                path: 'fs://inote.db'
            }, function(ret, err){
                if(ret.status){
                    // 相关的操作放在这里
                    update(id, document.getElementById('textarea1').value);
                    closeDatabase();
                }else{
                    api.alert({msg:err.msg});
                }
            });
        };
        function deleteText() {
            var db = api.require('db');
            db.openDatabase({
                name: 'inote',
                path: 'fs://inote.db'
            }, function(ret, err){
                if(ret.status){
                    // 相关的操作放在这里
                    del(id);
                    closeDatabase();
                }else{
                    api.alert({msg:err.msg});
                }
            });
        };
        function closeDatabase() {
            var db = api.require('db');
            db.closeDatabase({name:'inote'});      
        };
        function executeSql(sql) {
            var db = api.require('db');
            db.executeSql({
                name: 'inote',
                sql: sql
            }, function(ret, err){
                if(ret.status){
                    api.openWin({
                        name: 'root',
                        reload: true
                    });
                    api.closeWin();
                }
            });
        };
        function update(id, detail) {
            var sql = "UPDATE Text SET detail = '"+detail+"', update_time = CURRENT_TIMESTAMP WHERE id = '"+id+"'";
            executeSql(sql);
        };
        function del(id) {
            var sql = "DELETE FROM Text WHERE id = '"+id+"'";
            executeSql(sql);
        };
    };
    // =====================================================
    // 事件处理
    function addEventListener() {
        // 隐藏footer
        api.addEventListener({
            name: 'hideEditMenu'
        }, function( ret, err ){
            if( ret ){
                // alert( JSON.stringify( ret ) );
                $api.removeCls($api.dom('#check'), 'hidef');
                $api.addCls($api.dom('#footer'), 'hidef');
            }else{
                alert( JSON.stringify( err ) );
            }
        });
    };

    function openText() {
        var textShow = $api.dom('.text-show');
        var wrap2 = $api.dom('.wrap2');
        $api.addCls(textShow, 'over');
        $api.addCls(wrap2, 'show');
        document.getElementById('textarea1').focus();
        sendEventHide();
    };
    function sendEventHide() {
        api.sendEvent({
            name: 'hideEditMenu'
        });
    };
    // =====================================================
    // 当点击完成后，发送完成事件给edit
    // 此window显示footer
    function complete() {
        $api.removeCls($api.dom('#footer'), 'hidef');
        api.sendEvent({name: 'update'});
    };
    function share() {
        // 分享
        var sharedModule = api.require("shareAction");
        var sharedMsg = {
            text : api.pageParam.detail,
            type : "text"
        };
        sharedModule.share(sharedMsg);
    };
    function addToTime() {
        // alert('ok');
        api.sendEvent({name: 'addtotime'});
    };
    function clickDelete() {
        api.openFrame({
            name: 'delete',
            url: 'delete.html',
            bounces: false,
            bgColor: 'rgba(0,0,0,0.4)',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    };
</script>
</html>